<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021-06-19
  Time: 16:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
    <%--    <link rel="stylesheet" href="${pageContext.request.contextPath}/bioarea/css/common.css">--%>
</head>
<body>


<form class="layui-form" lay-filter="branchForm" id="branchForm" action="##"style="display: none" >
    <input type="text" style="border: #0000FF" id="id" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label">门店编号</label>
        <div class="layui-input-inline" style="width: 320px;">
            <input type="text" id="branchid" name="branchid"   lay-verify="branchid" placeholder="请输入门店编号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">门店名</label>
        <div class="layui-input-inline" style="width: 320px;">
            <input type="text" id="branchname" name="branchname"  lay-verify="branchname" placeholder="门店名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开店日期</label>
        <div class="layui-input-inline" style="width: 320px;">
            <input type="text" name="starttime" id="starttime"  placeholder="yyyy-MM-dd" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">门店地址</label>
        <div class="layui-input-inline" style="width: 320px;" >
            <input type="text" name="address" placeholder="请输入门店地址" autocomplete="off" class="layui-input" id="address" lay-verify="address">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">分配店长</label>
        <div class="layui-input-inline" style="width: 320px;">
            <select id="branchSel" name="staffid" lay-verify="required">
                <option value="">-------------------员工姓名-------------------</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态选择</label>
        <div class="layui-input-inline" style="width: 320px;">
            <select id="state" name="state" lay-verify="required">
                <option value="">-------------------店铺状态-------------------</option>
                <%--<option value="0">整顿</option>--%>
                <option value="1">营业</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="tijiao" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>



<%--编辑店铺表单--%>
<form class="layui-form" lay-filter="branchForm1" id="branchForm1" action="##"style="display: none" >
    <input type="text" style="border: #0000FF;display: none" id="id1" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label">门店编号</label>
        <div class="layui-input-inline" style="width: 320px;">
            <input type="text" id="branchid1" name="branchid"  readonly="readonly"  lay-verify="required" placeholder="请输入门店编号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">门店名</label>
        <div class="layui-input-inline" style="width: 320px;">
            <input type="text" id="branchname1" name="branchname" required   lay-verify="required" placeholder="门店名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开店日期</label>
        <div class="layui-input-inline" style="width: 320px;">
            <input type="text" name="starttime" id="starttime1" readonly="readonly"  placeholder="yyyy-MM-dd" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">门店地址</label>
        <div class="layui-input-inline" style="width: 320px;" >
            <input type="text" name="address" placeholder="请输入门店地址" autocomplete="off" class="layui-input" id="address1" lay-verify="address">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">原店长工号</label>
        <div class="layui-input-inline" style="width: 320px;">
            <input type="text" id="oldstaffid" name="oldstaffid" required readonly="readonly"  lay-verify="required" placeholder="请输入门店编号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">原店长</label>
        <div class="layui-input-inline" style="width: 320px;">
            <input type="text" id="staffname" name="staffname" required readonly="readonly"  lay-verify="required" placeholder="请输入门店编号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <%--<div class="layui-form-item">
        <label class="layui-form-label">分配店长</label>
        <div class="layui-input-inline" style="width: 320px;">
            <select id="staffSelect" name="staffid" >
                <option value="">-------------------员工姓名-------------------</option>
            </select>
        </div>
    </div>--%>
    <div class="layui-form-item">
        <label class="layui-form-label">状态选择</label>
        <div class="layui-input-inline" style="width: 320px;">
            <select id="state1" name="state" lay-verify="required">
                <option value="">-------------------店铺状态-------------------</option>
                <%--<option value="0">整顿</option>--%>
                <option value="1">营业</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" id="TiJiao1" lay-submit lay-filter="formDemo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%--分配店长表单--%>
<form class="layui-form" lay-filter="branchForm2" id="branchForm2" action="##"style="display: none" >
    <div class="layui-form-item">
        <label class="layui-form-label">门店名称</label>
        <div class="layui-input-block">
            <select name="branchid" id="branchid2" disabled="disabled">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分配店长</label>
        <div class="layui-input-inline" style="width: 320px;">
            <select id="staffSelect" name="staffid" >
                <option value="">-------------------员工姓名-------------------</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo2">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<%--调离店长表单--%>
<form class="layui-form" style="display: none;" id="transferForm" lay-filter="transferForm">
    <input name="id" type="text" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">工号</label>
        <div class="layui-input-block">
            <input type="text" name="oldstaffid" readonly="readonly"  lay-verify="required" required autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="staffname" readonly="readonly"  lay-verify="required" required autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">门店名称</label>
        <div class="layui-input-block">
            <select name="branchid" id="oldbranchid" disabled="disabled">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所在职位</label>
        <div class="layui-input-block">
            <select name="oldroleid" id="oldroleid" disabled="disabled">
                <option value="1">店长</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">新店店名</label>
        <div class="layui-input-block">
            <select name="newbranchid" id="newbranchid">
                <option value="">--请选择门店--</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">新职位</label>
        <div class="layui-input-block">
            <select name="newroleid" id="newroleid">
                <option value="">--请选择职位--</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="transfer">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<div class="demoTable layui-form">
    <div class="layui-inline">
        <input class="layui-input" name="branchname" id="branchnameSel" placeholder="请输入店铺名" autocomplete="off">
    </div>
    <button class="layui-btn" id="reloadTabBtn" data-type="reload">搜索</button>
</div>



<table class="layui-hide" id="test" lay-filter="test"></table>



<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <%--<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>--%>
        {{#  if(${sessionScope.staff.branchid} == 12138){ }}
        <button class="layui-btn layui-btn-sm" id="addBtn" lay-event="addBranch">新增</button>
        {{#  } else { }}
        {{#  } }}
    </div>
</script>

<script type="text/html" id="barDemo">
    {{#  if(d.branchid == 12138){ }}
    <h2 style="color: red;font-weight: bolder;margin-left: 144px">总店</h2>
    {{#  } else { }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="editDZ">更换店长</a>
    {{#  if(${sessionScope.staff.branchid} == 12138){ }}
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="transfer">店长调离</a>
    {{#  } else { }}
    {{#  } }}
    <a class="layui-btn layui-btn-disabled layui-btn-xs" lay-event="del">删除</a>
    {{#  if(d.branchid == 12138){ }}

    {{#  } else { }}
    {{#  if(d.state == 0){ }}
    <button class="layui-btn layui-btn-sm" lay-event="updateState">营业</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="updateState">整顿</button>
    {{#  } }}
    {{#  } }}
    {{#  } }}


</script>


<script type="text/html" id="titleTpl">
    {{#  if(d.state == 0){ }}
    <button class="layui-btn layui-btn-sm layui-btn-danger">整顿</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-sm">营业</button>
    {{#  } }}
</script>

<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>

<script>
    /*    layui.config({
            base: '${pageContext.request.contextPath}/bioarea/js/'
    }).extend({
        bioarea: 'bioarea'
    });*/
</script>
<script>

    layui.use(['table','jquery','form','layer','laydate',/*'bioarea'*/], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var laydate= layui.laydate;
        /* var bioarea = layui.bioarea;*/

        laydate.render({
            elem : '#starttime',
            max : getNowFormatDate()
        });

        $.ajax({
            url: '${pageContext.request.contextPath}/type/getAllType',
            type: 'get',
            dataType: 'json',
            success: function (types) {
                console.log(types)
                $.each(types, function (i, obj) {
                    $("#oldbranchid").append(
                        $("<option></option>").attr("value", obj.branchid).text(obj.branchname)
                    )
                    $("#newbranchid").append(
                        $("<option></option>").attr("value", obj.branchid).text(obj.branchname)
                    )
                    $("#branchid2").append(
                        $("<option></option>").attr("value", obj.branchid).text(obj.branchname)
                    )
                })
                form.render('select');
            }
        })






        $.ajax({
            url: '${pageContext.request.contextPath}/type/getAllRole',
            type: 'get',
            dataType: 'json',
            success: function (types) {
                console.log(types)
                $.each(types, function (i, obj) {
                    $("#newroleid").append(
                        $("<option></option>").attr("value", obj.roleid).text(obj.rolename)
                    )
                })
                form.render('select');
            }
        })



        form.verify({
            branchid: function(value, item){ //value：表单的值、item：表单的DOM对象
                var branchid = $("#branchid").val()
                var message = '';
                $.ajax({
                    url: "${pageContext.request.contextPath}/branch/getOneBranch",
                    type: 'post',
                    data:{"branchid":branchid},
                    async:false,
                    dataType:'json',
                    success:function (result){
                        if (result.code==1){//编号不重复
                        }else {//编号重复
                            message ="店铺编号已存在，请重新输入！"
                        }
                    }
                })
                if (message != '') {
                    return message;
                }
            }
        });

        form.verify({
            branchname: function(value, item){ //value：表单的值、item：表单的DOM对象
                var branchname = $("#branchname").val()
                var message = '';
                $.ajax({
                    url: "${pageContext.request.contextPath}/branch/getBranchName",
                    type: 'post',
                    data:{"branchname":branchname},
                    async:false,
                    dataType:'json',
                    success:function (result){
                        if (result.code==1){//编号不重复
                        }else {//编号重复
                            message ="店铺名已存在，请重新输入！"
                        }
                    }
                })
                if (message != '') {
                    return message;
                }
            }
        });


        //分店编号表单验证
        $("#branchid").blur(function (){
            var branchid = $("#branchid").val()
            $.ajax({
                url: "${pageContext.request.contextPath}/branch/getOneBranch",
                type: 'post',
                data:{"branchid":branchid},
                async:false,
                dataType:'json',
                success:function (result){
                    if (result.code==1){//编号不重复
                    }else {//编号重复
                        layer.msg(result.msg)
                    }
                }
            })
        })

        //分店名称表单验证
        $("#branchname").blur(function (){
            var branchname = $("#branchname").val()
            $.ajax({
                url: "${pageContext.request.contextPath}/branch/getBranchName",
                type: 'post',
                data:{"branchname":branchname},
                async:false,
                dataType:'json',
                success:function (result){
                    if (result.code==1){//编号不重复
                    }else {//编号重复
                        layer.msg(result.msg)
                    }
                }
            })
        })
        //分店名称表单验证
        $("#branchname1").blur(function (){
            var branchname = $("#branchname1").val()
            $.ajax({
                url: "${pageContext.request.contextPath}/branch/getBranchName",
                type: 'post',
                data:{"branchname":branchname},
                async:false,
                dataType:'json',
                success:function (result){
                    if (result.code==1){//编号不重复
                        $("#TiJiao1").attr('disabled', false);
                    }else {//编号重复
                        $("#TiJiao1").attr('disabled', true);
                        layer.msg(result.msg)
                    }
                }
            })
        })

        function getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month
                + seperator1 + strDate + " " + date.getHours() + seperator2
                + date.getMinutes() + seperator2 + date.getSeconds();
            return currentdate;
        }


        table.render({
            id:'tb',
            elem: '#test'
            ,url:'${pageContext.request.contextPath}/branch/listByCondition'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,title: '店铺信息详情表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'编号',fixed: 'left',sort: true}
                ,{field:'branchid', title:'门店编号'}
                ,{field:'branchname', title:'门店名'}
                ,{field:'starttime', title:'开店时间'}
                ,{field:'address', title:'地址'}
                ,{field: 'staffname', title:'店长',templet: function (d){
                        if (d.staffname!=null){
                            return d.staffname
                        }else {
                            return '待定'
                        }
                    }}
                ,{field: 'oldstaffid', title:'店长编号',hide:true,templet: function (d){
                        if (d.oldstaffid!=null){
                            return d.oldstaffid
                        }else {
                            return '暂无'
                        }
                    }}
                ,{field:'counts', title:'本店人数'}
                ,{field:'state', title:'状态' ,templet:'#titleTpl'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:360,id:'right'}
            ]]
            ,page: true
            ,limit:10
            ,limits:[6,12,18]
        });

        $("#reloadTabBtn").click(function (){
            table.reload('tb',{
                where: { //设定异步数据接口的额外参数
                    branchname:$("#branchnameSel").val()
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })

        $.ajax({
            type:'post',
            url: '${pageContext.request.contextPath}/staff/getStaff',
            dataType:'json',
            success:function (branchs){
                $.each(branchs,function (i,obj){
                    $("#staffSelect").append(
                        $("<option></option>").attr('value',obj.staffid).text(obj.staffname)
                    )
                    $("#branchSel").append(
                        $("<option></option>").attr('value',obj.staffid).text(obj.staffname)
                    )
                })
                form.render('select')
            }
        })
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                case 'addBranch':
                    $("#branchForm")[0].reset();
                    layer.open({
                        type:1,
                        title:'新增门店信息',
                        area:['500px','500px'],
                        offset:'0px',
                        anim:4,
                        content:$("#branchForm"),
                    })
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });


        form.on('submit(formDemo)', function(data){
            //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/branch/addOrUpdateBranch',
                dataType:'json',
                data:$("#branchForm").serialize(),
                success:function (result){
                    layer.closeAll();
                    if (result.code == 1) {
                        layer.msg(result.msg)
                    }else {
                        layer.msg(result.msg)
                    }
                    table.reload('tb')
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on('submit(formDemo1)', function(data){
            //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/branch/addOrUpdateBranch',
                dataType:'json',
                data:$("#branchForm1").serialize(),
                success:function (result){
                    layer.closeAll();
                    if (result.code == 1) {
                        layer.msg(result.msg)
                    }else {
                        layer.msg(result.msg)
                    }
                    table.reload('tb')
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on('submit(formDemo2)', function(data){
            //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/branch/DZUpdate',
                dataType:'json',
                data:data.field,
                success:function (result){
                    layer.closeAll();
                    if (result.code == 1) {
                        layer.msg(result.msg)
                    }else {
                        layer.msg(result.msg)
                    }
                    table.reload('tb')
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //店长调动
        form.on('submit(transfer)', function(data){
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            console.log($("#transferForm").serialize()) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/branch/DZTransfer',
                dataType:'json',
                data:data.field,
                success:function (result){
                    layer.closeAll();
                    if (result.code == 1) {
                        layer.msg(result.msg)
                    }else {
                        layer.msg(result.msg)
                    }
                    table.reload('tb')
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                var flag = 1;
                if (data.counts > 0) {
                    flag = 0;
                    layer.msg("该分店还存在员工，不能删除！")
                }
                if (flag==1){
                    layer.confirm('真的删除店铺吗?', function(index){
                        if (data.state==0) {
                            $.ajax({
                                type:'get',
                                url:'${pageContext.request.contextPath}/branch/delete',
                                data:{'id':data.id},
                                dataType: 'json',
                                success:function (result){
                                    if (result.code == 1) {
                                        layer.msg(result.msg)
                                    }else {
                                        layer.msg(result.msg)
                                    }
                                    table.reload('tb')
                                }
                            })
                            layer.close(index);
                        }else {
                            layer.msg("该分店还在营业无法删除！！")
                        }

                    });
                }
            } else if(obj.event === 'edit') {
                $("#branchForm1")[0].reset();
                layer.open({
                    type:1,
                    title:'修改门店信息',
                    area:['500px','500px'],
                    offset:'0px',
                    anim:4,
                    content:$("#branchForm1"),
                })
                console.log(data)
                form.val('branchForm1',data);
            }else if(obj.event === 'updateState'){
                layer.confirm('确定营业/整顿吗?', function(index){
                    $.ajax({
                        type:'get',
                        url:'${pageContext.request.contextPath}/branch/updateState',
                        data:{'id':data.id,'state':data.state},
                        dataType: 'json',
                        success:function (result){
                            if (result.code == 1) {
                                layer.msg(result.msg)
                            }else {
                                layer.msg(result.msg)
                            }
                            table.reload('tb')
                        }
                    })
                    layer.close(index);
                });
            }else if (obj.event === 'editDZ'){
                var flag = 1;
                if (data.staffname != null) {
                    flag = 0;
                    layer.msg("该分店有店长，请先调离！");
                }
                if (flag == 1) {
                    $("#branchForm2")[0].reset();
                    layer.open({
                        type:1,
                        title:'修改门店店长',
                        area:['500px','200px'],
                        offset:'0px',
                        anim:4,
                        content:$("#branchForm2"),
                    })
                    console.log(data)
                    form.val('branchForm2',data);
                }
            }else if (obj.event === 'transfer') {
                var flag = 1;
                if (data.branchid==12138){
                    flag = 0;
                    layer.msg("该店长为总店长，禁止调离！！");
                }
                if (data.staffname == null) {
                    flag = 0;
                    layer.msg("该分店无店长，无需调离！");
                }
                if (flag == 1) {
                    $("#transferForm")[0].reset();
                    layer.open({
                        type:1,
                        title:'调离门店店长',
                        area:['400px','500px'],
                        offset:'0px',
                        anim:4,
                        content:$("#transferForm"),
                    })
                    console.log(data)
                    form.val('transferForm',data);
                }
            }
        });
    });
</script>
</body>
</html>
